<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @harry="harryFn" :list="list"></TodoHeader>
    <TodoMain :list="showList" @del="delFn" ></TodoMain>
    <TodoFooter @changeType="typeFn" :getSel="getSel" @delTl="delbFn" :len="showList.length" ></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";


export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem('todolist')) || [],
      getSel: 'all',
    };
  },
  watch: {
    list: {
      handler() {
        localStorage.setItem('todolist', JSON.stringify(this.list))
      }
    }
  },
  methods: {
    harryFn(harry) {
      this.list.length === 0 ? this.list.push({id:100,name:harry,isDone:false}) : this.list.push({id:this.list.at(-1).id+1,name:harry,isDone:false})
    },
    delFn(id) {
      // this.list.splice(id,1)
      this.list = this.list.filter(item => item.id !== id)
    },
    typeFn(type) {
      this.getSel = type
    },
    delbFn() {
      this.list = this.list.filter(item => item.isDone !== true)
    },
    btnAll(type) {
      this.All = type
    },
  },
  computed: {
    showList() {
      if (this.getSel === 'yes') {
        return this.list.filter(item => item.isDone)
      }else if (this.getSel === 'no') {
        return this.list.filter(item => !item.isDone)
      }else {
        return this.list
      }
    },
  }
};
</script>